{% extends 'base.html' %}

{% load static %}  <!-- 在子模板中加载静态文件 -->

{% block title %}命名实体识别{% endblock %}

{% block content %}
    <h1>命名实体识别</h1>
    <p>请输入一段中文文本：</p>
    <form method="post">
        {% csrf_token %}
        <textarea name="text">{{ user_input }}</textarea><br>
        <div class="button-container">
            <input type="submit" value="命名实体识别" class="styled-button">
        </div>
    </form>
    {% if show_result %}
        <div>
            <h2>命名实体识别结果</h2>
            <div>{{ highlighted_text|safe }}</div>
        </div>
    {% endif %}
    <style>
        textarea {
            width: 98%; /* 设置宽度为98% */
            height: 150px; /* 设置高度为150px */
            font-size: 16px; /* 设置字体大小 */
            padding: 10px; /* 内边距 */
            border: 1px solid #ccc; /* 边框颜色 */
            border-radius: 4px; /* 边框圆角 */
            resize: vertical; /* 允许垂直调整大小 */
        }

        h1 {
            text-align: left; /* 标题居中对齐 */
            color: black;
            margin-top: 40px;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        .button-container {
            display: flex; /* 使用flex布局 */
            justify-content: flex-end; /* 将内容对齐到右侧 */
        }

        .styled-button {
            background-color: #007bff; /* 按钮背景色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角边框 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
        }

        .styled-button:hover {
            background-color: #0056b3; /* 悬停时的背景色 */
            transform: scale(1.05); /* 悬停时轻微放大 */
        }

        .styled-button:active {
            transform: scale(0.95); /* 按下时轻微缩小 */
        }
    </style>
{% endblock %}



